<template>
  <div class="weChatOrder" v-show="dialogVisible">
    <el-dialog title="提示" :visible.sync="dialogVisible" width>
      <div slot="title" class="dialog-header">
        <el-tabs v-model="activeName" @tab-click="handleClick" key="1">
          <el-tab-pane label="询价" name="first"></el-tab-pane>
          <el-tab-pane label="开仓下单" name="second"></el-tab-pane>
          <el-tab-pane label="客户报价" name="third"></el-tab-pane>
        </el-tabs>
      </div>
      <el-tabs v-model="aa" key="2">
        <el-tab-pane label="香草" name="one">
          <div v-if="activeName=='first'">
            <div class="btn">
              <el-button @click="addTable" size="small" icon="el-icon-plus">新增</el-button>
            </div>
            <el-table :data="tableData" style="width: 100%" height="200px">
              <el-table-column label="代码/简称" width="260">
                <template slot-scope="scope">
                  <autocomplete
                    :code="scope.row.code"
                    :size="'small'"
                    @getNameCode="getNameCode($event,scope.$index, tableData)"
                  ></autocomplete>
                </template>
              </el-table-column>
              <el-table-column label="结构">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.aliasname_list"
                    multiple
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option
                      v-for="item in aliasname_list"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="规模">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.price_list" multiple placeholder="请选择" size="small">
                    <el-option
                      v-for="item in price_list"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="80">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteRow(scope.$index, tableData)"
                    type="text"
                    size="small"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="result">
              <div class="result-list" v-for="(item,index) in tableData" :key="index">
                <p>询价({{ index +1}})</p>
                <p>{{ item.code }}</p>
                <p v-show="item.aliasname_list.length>0">{{ item.aliasname_list.join() }}</p>
                <p v-show="item.price_list.length>0">民本{{item.price_list.join() }}</p>
              </div>
            </div>
            <div class="footer">
              <el-button style="background:#3377FF;color:#fff" @click="copy">复 制</el-button>
              <el-button @click="enter">取 消</el-button>
            </div>
          </div>
          <div v-if="activeName=='second'">
            <div class="btn">
              <el-button @click="addTable" size="small" icon="el-icon-plus">新增</el-button>
            </div>
            <el-table :data="tableData" style="width: 100%" height="200px">
              <el-table-column label="代码/简称" width="260">
                <template slot-scope="scope">
                  <autocomplete
                    :code="scope.row.code"
                    :size="'small'"
                    @getNameCode="getNameCode($event,scope.$index, tableData)"
                  ></autocomplete>
                </template>
              </el-table-column>
              <el-table-column label="结构">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.aliasname_list"
                    multiple
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option
                      v-for="item in aliasname_list"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="规模">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.price_list" multiple placeholder="请选择" size="small">
                    <el-option
                      v-for="item in price_list"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="系统报价">
                <template slot-scope="scope">
                  <el-input size="small" v-model="scope.row.systemQuotation"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="人工报价">
                <template slot-scope="scope">
                  <el-input size="small" v-model="scope.row.manualQuotation"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="80">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteRow(scope.$index, tableData)"
                    type="text"
                    size="small"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="result">
              <div class="result-list" v-for="(item,index) in tableData" :key="index">
                <p>询价({{ index +1}})</p>
                <p>{{ item.code }}</p>
                <p v-show="item.aliasname_list.length>0">
                  {{ item.aliasname_list.join() }}
                  <span>{{item.price_list.join()}}</span>
                </p>
                <p>费率{{ item.systemQuotation }}，{{item.manualQuotation? item.manualQuotation+'元':'市值' }}</p>
              </div>
            </div>
            <div class="footer">
              <el-button style="background:#3377FF;color:#fff" @click="copyxiadan">复 制</el-button>
              <el-button @click="enter">取 消</el-button>
            </div>
          </div>
          <div v-if="activeName=='third'">
            <div class="btn">
              <el-button @click="addTable" size="small" icon="el-icon-plus">新增</el-button>
            </div>
            <el-table :data="tableData" style="width: 100%" height="200px">
              <el-table-column label="代码/简称" width="260">
                <template slot-scope="scope">
                  <autocomplete
                    :code="scope.row.code"
                    :size="'small'"
                    @getNameCode="getNameCode($event,scope.$index, tableData)"
                  ></autocomplete>
                </template>
              </el-table-column>
              <el-table-column label="结构">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.aliasname_list"
                    multiple
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option
                      v-for="item in aliasname_list"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="规模">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.price_list" multiple placeholder="请选择" size="small">
                    <el-option
                      v-for="item in price_list"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="80">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteRow(scope.$index, tableData)"
                    type="text"
                    size="small"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="result">
              <div class="result-list" v-for="(item,index) in tableData" :key="index">
                <p>询价({{ index +1}})</p>
                <p>{{ item.code }}</p>
                <p v-show="item.aliasname_list.length>0">{{ item.aliasname_list.join() }}</p>
                <p v-show="item.price_list.length>0">民本{{item.price_list.join() }}</p>
              </div>
            </div>
            <div class="footer">
              <el-button style="background:#3377FF;color:#fff" @click="copy">复 制</el-button>
              <el-button @click="enter">取 消</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="雪球" name="tow">雪球</el-tab-pane>
        <el-tab-pane label="指数" name="three">指数</el-tab-pane>
        <el-tab-pane label="港股" name="fourth">港股</el-tab-pane>
        <el-tab-pane label="美股" name="five">美股</el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script>
import autocomplete from "./autocomplete.vue";
import { cycle_and_pro } from "../api/index";
export default {
  components: {
    autocomplete
  },
  data() {
    return {
      dialogVisible: false,
      activeName: "first",
      aa: "one",
      tableData: [
        {
          code: "",
          aliasname_list: [],
          price_list: []
        }
      ],
      aliasname_list: [],
      price_list: []
    };
  },
  mounted() {
    this.getcycle_and_pro();
  },
  methods: {
    async getcycle_and_pro() {
      const { data } = await cycle_and_pro();
      this.aliasname_list = data.aliasname;
      this.price_list = data.cycle;
      console.log(data);
    },
    changeCellStyle(row) {
      return "color: #1570e8;font-size:13px;height:32px;padding:0px";
    },
    editchangeCellStyle({ row, rowIndex }) {
      if (rowIndex == 0) {
        return "color:rgb(233, 48, 48);text-align:center;font-size:13px;height:32px;padding:0px";
      } else {
        return "text-align:center;font-size:13px;height:32px;padding:0px";
      }
    },
    handleClick(tab) {
      console.log(tab);
      if (tab.name == "first") {
        this.tableData = [
          {
            code: "",
            aliasname_list: [],
            price_list: []
          }
        ];
      } else if (tab.name == "second") {
        this.tableData = [
          {
            code: "",
            aliasname_list: [],
            price_list: [],
            systemQuotation: "",
            manualQuotation: ""
          }
        ];
      } else {
        this.tableData = [
          {
            code: "",
            aliasname_list: [],
            price_list: []
          }
        ];
      }
    },
    addTable() {
      this.tableData.push({
        code: "",
        aliasname_list: "",
        price_list: ""
      });
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    getNameCode(e, index, rows) {
      rows[index].code = e;
    },
    copy() {
      let oInput = document.createElement("textarea");
      oInput.value = this.tableData.map((item, index) => {
        return `
        询价(${index + 1})
        ${item.code}
        ${item.aliasname_list.join()}
        民本${item.price_list.join()}`;
      });
      // 页面底部追加输入框
      document.body.appendChild(oInput);
      // 选中输入框
      oInput.select();
      // 执行浏览器复制命令
      document.execCommand("Copy");
      // 弹出复制成功信息
      this.$message.success("复制成功");
      // 复制后移除输入框
      oInput.remove();
      this.dialogVisible = false;
    },
    enter() {
      this.tableData = [
        {
          code: "",
          aliasname_list: [],
          price_list: []
        }
      ];
      this.dialogVisible = false;
    },
    copyxiadan() {
      let oInput = document.createElement("textarea");
      oInput.value = this.tableData.map((item, index) => {
        return `
        询价【${index + 1}】
        ${item.code}
        ${item.aliasname_list.join()}   ${item.price_list.join()}
        费率${item.systemQuotation} ${
          item.manualQuotation ? item.manualQuotation : "市值"
        } `;
      });
      // 页面底部追加输入框
      document.body.appendChild(oInput);
      // 选中输入框
      oInput.select();
      // 执行浏览器复制命令
      document.execCommand("Copy");
      // 弹出复制成功信息
      this.$message.success("复制成功");
      // 复制后移除输入框
      oInput.remove();
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="less" scoped>
.weChatOrder {
  width: 100%;
  height: 100%;
  .el-dialog {
    width: 732px;
  }
  /deep/ .el-dialog__header {
    width: 100%;
    padding-top: 0;
    box-sizing: border-box;
    height: 58px;
    background: #f7f7f7;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);

    padding-bottom: 0;

    .el-tabs__header {
      margin: 0;
    }

    .el-tabs__item {
      height: 58px;
      line-height: 58px;
      color: #999999;
      font-size: 17px;
    }

    .el-tabs__nav-wrap::after {
      height: 0;
    }

    .el-tabs__active-bar {
      background: #000;
    }

    .is-active {
      background: unset !important;
      color: #000 !important;
    }
  }
  /deep/ .el-dialog__body {
    padding-top: 10px;

    .is-active {
      background: unset !important;
      color: #000 !important;
    }
    .btn {
      width: 100%;
      margin-bottom: 10px;
      text-align: right;
      .el-button {
        background: #3377ff;
        color: #fff;
      }
    }
    .result {
      margin-top: 20px;
      width: 100%;
      height: 180px;
      overflow: auto;
      background: #fbfbfb;
      border-radius: 5px;
      padding: 0 10px;
      &-list {
        widows: 100%;
        margin-top: 10px;
      }
    }
    .footer {
      border-top: 1px solid #f5f5f5;
      margin-top: 20px;
      display: flex;
      justify-content: center;
      padding-top: 10px;
      .el-button {
        width: 190px;
        height: 36px;
      }
    }
  }
  /deep/ .el-table--border th.el-table__cell:hover {
    background: #ddd;
  }

  /deep/ .el-table th.el-table__cell {
    background: #f4f4f4;
    font-weight: unset;
    color: #1e2024;
    height: 50px;
    cursor: pointer;
  }
}
</style>